define(['vue'], function(Vue){ 
	//树节点模板 
	var templatestr='<li>\
			<div class="x-title" @click="toggle" style="width:100%;" v-if="(!$root.isSearch)||nodeShow">\
			<template v-if="haschildren">\
			<i class="icon icon-rdominus "  v-if="model.open"></i>\
			<i class="icon icon-rdoadd  "  v-else="model.open"></i>\
			</template>\
			<template v-else="haschildren">\
			<template v-if="$root.multiple">\
			<i class=" icon icon-cbook-fill size18"  v-if="checked"></i>\
			<i class=" icon icon-cbook size18"  v-else="checked"></i>\
			</template>\
			<i class=" icon icon-arrowright size18"  v-else="$root.multiple"></i>\
			</template>\
			<span style="display:-moz-inline-box; display:inline-block;width:75%;line-height: 20px;" >\
			{{model.name}}\
			</span>\
			</div>\
			<ul v-show="model.open" v-if="haschildren"  class="x-node">\
			<tree class="x-item" v-for="(item,index) in model.children"  :model="item" :key="item.id" v-show="item.open">\
			</tree>\
			</ul>\
			</li>';
	  
     // 初始化树
     var init = function(opt){
      if (!opt.el)
       return false
      //树节点 
	  Vue.component('tree',  {
	  	template : templatestr,
	  	props : {
	  		model : Object
	  	},
	  	data : function() {
	  		return {
	  			//open : false,
	  			checked : false,
	  			nodeShow: false
	  		}
	  	},
	  	computed : {
	  		haschildren : function() {
	  			return this.model.children && this.model.children.length
	  		}
	  	},
	  	methods : {
	  		toggle : function() {
	  			if (this.haschildren) {
	  				this.model.open = !this.model.open
	  			} else {
	  				if(!this.model.path)
	  				  this.model.path=this.getPath(this.model.name)
	  				//单选
	  				if (!this.$root.multiple){
	  				  this.$root.selected(this.model)	
	  				}else{
	  				  //多选
	  				  this.checked=!this.checked;
	  				  if (this.checked){
	  				  	this.$root.selectedList.push(this.model)
	  				  }else{
	  				  	var idx =this.$root.selectedList.indexOf(this.model)
	  				  	this.$root.selectedList.splice(idx,1)
	  				  };
	  				}
	  			}
	  		},
	  		getPath:function(str){
	  			if (this.$parent!=this.$root){
	  			  str=this.$parent.model.name+'-->'+str
	  			  return this.$parent.getPath(str)
	  			}
	  			else
                  return str 
	  		}
	  	},
	  	updated : function() {
	  		this.$nextTick(function(){ this.$root.refreshScroll()})
	  	}
	  });
	  
	  
	  // 实例化树
	  var treeVm = new Vue({
	  	el : opt.el,
	  	template:'<div>\
	  	        <div class="input-box radius4" style="margin:5px;top:10px;height:35px" v-show="canSearch">\
					<i class="color-placeholder icon icon-search"></i>\
					<input placeholder="搜索" v-model="searchData"></input>\
					<a @click="clearStr"><i class="color-placeholder icon icon-clear-fill" v-show="isSearch"></i></a>\
				</div>\
				<div :id="scroller" data-scroll="verticle" style="top:15px;bottom:45px" :style="canSearch?{top:\'52px\'}:{}" >\
					<div class="scroller">\
						<ul class="x-tree"><li is="tree" class="x-item" :model="treeData" ></li></ul>\
					</div>\
				</div>\
				<footer v-if="multiple">\
				   <span class="button radius4 block bold" style="margin:5px" @click="commit">确认</span>\
				</footer></div>',
	  	data : {
	  		elString:opt.el,
	  		multiple:opt.multiple,
	  		canSearch:opt.canSearch,
	  		treeData : {},
	  		searchData:"",
	  		selectedList:[],
	  		isSearch:false,
	  		nodeShow: false,
	  		scroller : '_'+opt.el.substr(1)+'_main'
	  	},
	  	methods : {
	  		initTree : function(data) {
	  		    this.selectedList=[]
	  			this.treeData = data
	  		},
	  		selected:function(data){
	  		  //子节点选择后的处理函数，需外部重写
	  		  alert(JSON.stringify(data))
	  		  return false
	  		},
	  		refreshScroll:function(){
	  		  //加载子节点后刷新滚动条，需外部重写
	  		  //参考写法需要引入AL
	  		  A.Scroll('#'+this.scroller).refresh()
	  		},
	  		commit:function(){
	  		  //多选确认键后
	  		  this.selected(this.selectedList)
	  		  //清空选项
	  		  this.selectedList = []
	  		  this.clearCheck(this)
	  		},
	  		clearCheck:function(node){
	  			if(node.$children.length>0){
	  			   var array = node.$children
	  			   for(key in array)
	  				 this.clearCheck(array[key])
	  			}else{
	  				if (node.checked)
	  				node.checked = false
	  			}
	  		},
	  		searchNode:function(node,keyword){
	  			//匹配的结果点亮路径
	  			if (node.$children.length>0){
	  			  if (node.model)
	  			  if(node.model.name.indexOf(keyword)>-1){
	  			    //中途节点命中设置所有子节点可见后返回
	  			  	this.set_NodeShow(node,true)
	  			    return true
	  			  }
	  			  //如果中途节点未匹配则继续寻踪子节点匹配
	  			  var havematch = false
	  			  for(i in node.$children)
	  			    havematch = this.searchNode(node.$children[i],keyword)?true:havematch
	  			  if(node.model)
	  				 node.nodeShow = node.model.open = havematch
	  			}else{
	  				node.nodeShow = (node.model.name.indexOf(keyword)>-1)
	  			}
	  		    return node.nodeShow 
	  			
	  		},
	  		set_NodeShow:function(node,flag){
	  			if (node.$children.length>0){
	  			  node.nodeShow =flag
	  			  for(i in node.$children)
	  			  	this.set_NodeShow(node.$children[i],flag)
	  			}else{
	  				node.nodeShow =flag
	  			}
	  		},
	  		clearStr:function(){
	  		   this.searchData = ""
	  		}
	  	},
	  	watch:{// 根据搜索框内容重新渲染数据
	  		searchData:function(val,oldVal){
	  			if (this.selectedList.length>0){
	  				this.selectedList = []
	  			}
	  			if(val.length>0){
	  				this.isSearch = true
	  				//从root开始检索
	  				this.searchNode(this,val)
	  			}else{
	  				//切换为无检索模式
	  				this.isSearch = false
	  			}
	  		}
	  	}
	  })
	  
	  return treeVm;
	  
     }
     return {init:init};  
})  
